<template>
  <div class="box">
    <div class="box2">
      <div class="search">
          <!-- 订单输入框 -->
          <el-input placeholder="商户订单号" v-model="input" clearable></el-input>
          <!-- 状态查询框1 -->
          <el-select v-model="values" clearable class="selet">
            <el-option
              v-for="item in options"
              :key="item.values"
              :label="item.labels"
              :value="item.values"
            ></el-option>
          </el-select>
          <!-- 订单状态 -->
          <el-select v-model="value" clearable class="selet">
            <el-option
              v-for="item in states"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- 日期选择框 -->
          <div class="input-time">
              <span class="time-text"> 入单时间:</span>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" class="time-input">
              </el-date-picker>
          </div>

          <!-- 收款人输入框 -->
          <el-input placeholder="收款人" v-model="input4" clearable></el-input>

          <!-- 搜索按钮 -->
          <el-button type="primary" icon="el-icon-search" @click="searcherbtn">搜索</el-button>

          <!-- 导出按钮 -->
          <el-button type="primary" icon="el-icon-folder-opened">导出</el-button>
      </div>

    <!-- 表单内容 -->
    <div class="content">
      <!-- 头部 -->
      <div class="content-title">
            <el-input placeholder="0/0" v-model="input2" disabled readonly class="content-title-input">
              <template slot="prepend">交易笔数</template>
            </el-input>
            <el-input placeholder="0/0元" v-model="input3" disabled readonly class="content-title-input">
              <template slot="prepend">交易金额</template>
            </el-input>
      </div>
      <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            :row-style="{ height: '38.5px' }"
            :header-cell-style="headerStyle"
            :cell-style="typecolor"
            :default-sort = "{prop: 'date', order: 'descending'}"
          >
            <el-table-column type="selection" width="48" align="center" > </el-table-column>
            <el-table-column prop="order_number" width="200" label="商户订单号"  align="center" >
            </el-table-column>
            <el-table-column prop="userAccount.merchant_name" width="118" label="商户名称" align="center"  :show-overflow-tooltip="true" >
            </el-table-column>
            <el-table-column prop="userAccount.bankcard.bankName" width="164" label="银行名称" align="center" :show-overflow-tooltip="true"  >
            </el-table-column>
            <el-table-column prop="userAccount.bankcard.bankCardNo" width="180" label="银行卡号" align="center" >
            </el-table-column>
            <el-table-column prop="userAccount.bankcard.cardholderName" width="142" label="收款人姓名" align="center" >
            </el-table-column>
            <el-table-column prop="alternations_amount" width="142" label="实付金额" align="center" >
            </el-table-column>
            <el-table-column prop="type_id" width="121" label="代付状态" align="center" >
            </el-table-column>
            <el-table-column width="185" label="创建时间" align="center" :show-overflow-tooltip="true"  >
               <template slot-scope="scope">
                  {{$timer(scope.row.creat_time)}}
                </template>
            </el-table-column>
            <el-table-column width="185" label="代付时间" align="center" :show-overflow-tooltip="true" >
               <template slot-scope="scope">
                  {{$timer(scope.row.sysAudit.audit_time)}}
                </template>
            </el-table-column>
            <el-table-column prop="sysAudit.listOperation[0].operation_man" width="142" label="受理人" align="center" >
            </el-table-column>
          </el-table>
      </div>

      <!-- 分页 -->
      <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[20, 25, 30, 35,]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            background
            >
            </el-pagination>
        </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      //系统订单号输入框
      input: '',
      // 全部商户
      options: [
        {
          values: "全部商户",
          labels: "全部商户",
        },
        {
          values: "test",
          labels: "test",
        },
      ],
      values: "全部商户",
      // 订单状态
      states: [
        {
          value: "订单状态",
          label: "订单状态",
        },
        {
          value: "未代付",
          label: "未代付",
        },
        {
          value: "未审核",
          label: "未审核",
        },
        {
          value: "转账中",
          label: "转账中",
        },
        {
          value: "已代付",
          label: "已代付",
        },
        {
          value: "已拒绝",
          label: "已拒绝",
        },
      ],
      value: "订单状态",

      // 时间选择框
      value1:'',
     
    // 交易笔数
      input2: '',
      
    // 交易金额
      input3: '',

    // 收款人
      input4:'',

    //表单数据
    tableData: [],

    // 分页
    currentPage4: 1,
    
    // 总条数
    count: 0 ,
    }
    
    
  },
  methods:{
     headerStyle() {
      return {
        background: "#f2f2f2",
        height: "38.5px",
        padding: "5px 0",
        textAlign: "center",
        borderColor:"#e6e6e6",
        color: "#666",
        fontSize: "14px",
      };
    },

    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
    },
    searcherbtn(){
      this.$axios({
      url:'/cardDealerDaFuFindbyCondition',
      method: 'GET',
      params:{
        limit : 10,
        page : 1,
        cardholder_name: this.input4,
        end_time: this.value1[1],
        merchant_name: this.values,
        order_number: this.input,
        start_time: this.value1[0],
        state: this.value,
      }
    })
    .then(({data}) => {
      console.log(data)
      this.tableData =data.data
      console.log("搜索:",this.tableData)

    })
    .catch(err =>{
      console.log(err)
    })
  },
    // 不同内容显示不同颜色,类型渲染
    typecolor(row){
        if(row.row.type_id == 2  && row.column.label === "代付状态" ){
            return row.row.type_id ="未处理"
        }else if(row.row.type_id == 3  && row.column.label === "代付状态" ){
            return row.row.type_id ="已受理"
        }else if(row.row.type_id == 10  && row.column.label === "代付状态" ){
            return row.row.type_id ="提现成功"
        }else if(row.row.type_id == 12  && row.column.label === "代付状态" ){
            return row.row.type_id ="提现失败"
        }else if(row.row.type_id == 11  && row.column.label === "代付状态" ){
            return row.row.type_id ="未审核"
        }else if(row.row.type_id == 15  && row.column.label === "代付状态" ){
            return row.row.type_id ="冲正"
        }
    }
  },
  mounted(){

    // 数据读取接口
    this.$axios({
      url:'/system/agent/pmm/paymentorder/cardDealerDaFuFindbyCondition',
      method: 'GET',
      params:{
        limit : 10,
        page : 1,
        cardholder_name: '',
        end_time: '',
        merchant_name: '',
        order_number: '',
        start_time: '',
        state: '',
      }
    })
    .then(({data}) => {
      console.log(data)
      this.tableData =data.data
      console.log("代付订单:",this.tableData)
      // 总条数
      this.count = data.count
    })
    .catch(err =>{
      console.log(err)
    })

    // 交易笔数接口
    this.$axios({
      url:'/system/agent/pmm/paymentorder/selCardDealerNumberOfTransactionse',
      method: 'GET',
      
    })
    .then(res => {
      console.log("交易笔数",res)
      this.input2 = res.data.data
    })
    .catch(err =>{
      console.log(err)
    })

    // 交易金额接口
    this.$axios({
      url:'/system/agent/pmm/paymentorder/selCardDealerTransactionAmount',
      method: 'GET',
      
    })
    .then(res => {
      console.log("交易金额",res)
       this.input3 = res.data.data

    })
    .catch(err =>{
      console.log(err)
    })

  }
};



</script>

<style lang="scss" scoped>
.box {
  padding: 15px;
}
.box2 {
  padding: 7.5px;
  background: #fff;
}
.search{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
//系统订单号输入框
.el-input--suffix {
  width: 190px;
  margin: 5px;
}

// 商户选择框
.el-button--primary {
  background-color: #009688;
  border: #009688;
}
.el-select-dropdown__item.selected {
  background-color: #5fb878;
  color: #fff;
}
.selet{
  width: 190px;
  margin-right: 5px;
  margin-top: 5px;
}


//日期选择
.input-time{
  display: flex;
}
.time-text{
    padding: 9px 0;
    width: 80px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
    color: #666;
    font-size: 14px;
    margin-right: 15px;
}
.time-input{
  width: 300px;
  margin-right: 5px;
  margin-top: 5px;
}
//搜索按钮
.el-button--primary {
  background-color: #009688;
  border: #009688;
  height: 40px;
  margin-top: 5px;
}

// 交易笔数
.content-title{
  display: flex;
  padding: 10px 15px;
  background-color: #f2f2f2;
  border: 1px solid #e6e6e6;
}
.content-title-input{
  width: 300px;
  margin-right: 30px;
}
// 表单
.content-tab{
    margin-top: 20px;
}
.tab-top{
    padding: auto;
    padding: 10px 900px 10px 15px;
    height: 40px;
    background: #f2f2f2;
}

// 分页
.block{
    border: 1px solid #e6e6e6;
    padding: 7px ;
}
</style>>
